<template>
  <div class="searchContainer" @click="routerLink('search')">
    <div class="search">
      <input v-model="kw" type="" placeholder="输入关键词搜索相关内容">
      <div @click="searchHandler" class="wz">查询</div>
    </div>
    <!-- <div @click="show = true">
      <span class="iconfont icon-shaixuan"></span>
      <span class="icon-wenzi"> 筛选</span>
    </div>
    <div class="layer" v-show="show">
      <choose :index=index  @close="show = false"></choose>
    </div> -->
  </div>
</template>

<script>
// import choose from "@/components/item-choose";

import { searchLiek } from "@/api/miva";
export default {
  props: {
    isLink: {
      type: Boolean,
      default: true
    },
    index: {
      type: Number,
      default: 1
    }
  },
  // components: {
  //   choose
  // },
  data() {
    return {
      kw: "",
      show: false,
      list: []
    };
  },
  computed: {
    isisLink() {
      return this.$route.query.isLink === false ? false : this.isLink;
    }
  },
  mounted() {
    console.log(this.$route.query);
    if (this.$route.query.isLink === false) {
      this.isLink = false;
    }
  },
  methods: {
    //   show(){
    //       this.show=true,
    //       this.index=1
    //   }
    routerLink(name) {
      if (!this.isisLink) return;
      this.$router.push({
        name,
        query: {
          index: this.index
        }
      });
    },
    async searchHandler() {
      console.log(this.kw);
      const res = await searchLiek({ kw: this.kw });
      console.log(res);
      //   this.list = res.data
      this.$store.commit("search/SAVE_SEARCH", res.data);
    }
  }
};
</script>

<style lang="less">
.searchContainer {
  width: 100%;
  padding: 2vw 5vw;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    width: 95%;
    .wz{
      width: 50px;
      padding-left: 3%;
    }
  }
  .search input {
    width: 75%;
    border: none;
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
    background: #f4f4f4;
    padding: 0 25px;
    text-align: center;
    font-size: 12px;
  }
  .iconfont {
    font-size: 16px;
    padding-right: 5px;
  }
  .icon-wenzi {
    font-size: 14px;
    :hover {
      color: #ff0d2b;
    }
  }
}
</style>